<template>
    <up-popup :show="showPop" :customStyle="{ maxWidth: '350px' }" mode="right" :closeable="true" @close="closePop"
        @open="openPop">
        <view class="title-pop">
            详情
        </view>
        <scroll-view scroll-y="true" class="scroll-view-box">
            <up-form labelWidth="83" labelAlign="left">
                <up-form-item label="业务名称">
                    <view class="border-box">
                        {{ data.F_TITLE }}
                    </view>
                </up-form-item>
                <up-form-item label="业务类型">
                    <view class="border-box">
                        {{ data.F_YWLX }}
                    </view>
                </up-form-item>
                <up-form-item label="单据编号">
                    <view class="border-box">
                        {{ data.F_DJBH }}
                    </view>
                </up-form-item>
                <up-form-item label="供应商名称">
                    <view class="border-box">
                        {{ data.F_GYS }}
                    </view>
                </up-form-item>
                <up-form-item label="发起部门">
                    <view class="border-box">
                        {{ data.F_FQBM }}
                    </view>
                </up-form-item>
                <up-form-item label="发起人">
                    <view class="border-box">
                        {{ data.F_FQR }}
                    </view>
                </up-form-item>
                <up-form-item label="发起时间">
                    <view class="border-box">
                        {{ data.F_FQSJ }}
                    </view>
                </up-form-item>
                <up-form-item label="节点">
                    <view class="border-box">
                        {{ data.F_NODE_NAME }}
                    </view>
                </up-form-item>
                <up-form-item label="到达时间">
                    <view class="border-box">
                        {{ data.F_DDSJ }}
                    </view>
                </up-form-item>
                <up-form-item label="处理意见">
                    <view class="border-box">
                        {{ data.F_CLYJ }}
                    </view>
                </up-form-item>
            </up-form>
        </scroll-view>
    </up-popup>
</template>
<script setup>
import {
    ref,
    reactive,
    watch,
    toRefs,
} from "vue"
let props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    data: {
        type: Object,
        default: () => ({})
    }
})
let { data } = toRefs(props);
let emit = defineEmits(['update:modelValue'])
const showPop = ref(false);

watch(() => props.modelValue, (newValue) => {
    showPop.value = newValue
},{
    deep: true,
    immediate: true
})
watch(() => showPop.value, (newValue) => {
    emit('update:modelValue', newValue)
})
// 创建响应式数据  

// 定义方法  
function openPop() {
    // 打开逻辑，比如设置 show 为 true  
    showPop.value = true;
    // console.log('open');  
}

function closePop() {
    // 关闭逻辑，设置 show 为 false  
    showPop.value = false;
    // console.log('close');  
}
</script>
<style scoped lang="scss">
.scroll-view-box {
    // margin-top: 40px;
    // height: 500px;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    height: calc(100vh - 55px);
}

.scroll-view-list {
    flex: 1;
    height: calc(100% - 147px);
    box-sizing: border-box;
    width: calc(100% - 20px);
    margin: 10px auto 0;
    background: #fff;
    padding: 10px 10px;
    box-sizing: border-box;
    border-radius: 15px;
}

.right-box {
    display: flex;
    align-items: center;
    gap: 20px;
}

.inx-top-box {
    flex: 1;
    background-color: #fff;
    padding: 10px 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

.title-pop {
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-weight: 600;
}
</style>